<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="HandheldFriendly" content="true"/>
    <meta name="MobileOptimized" content="320" />
    <link rel="stylesheet" href="./css/reset.css">
    <title>账单记录</title>
    <style>
        .notice-hea {
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            height: 40px;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
        }
        
        .notice-hea span {
            font-size: 17px;
        }
        
        .notice-hea>div{
        	flex: 1 1 0;
        	display: flex;
        	justify-content: center;
        	align-items: center;
        }
        .notice-hea>div>span{
        	margin:0 12px;
        }
        .notice-list-wrap {
            position: fixed;
            top: 50px;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 20px;
            overflow: auto;
        }
        
        .title-hea {
            position: fixed;
            top: 60px;
            right: 0;
            left: 0;
            padding: 10px 20px;
            font-size: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 0 8px RGBA(53, 116, 250, 0.2);
        }
        
        .open-list-wrap {
            position: fixed;
            top: 100px;
            right: 0;
            left: 0;
            bottom: 0;
            box-sizing: border-box;
            overflow: auto;
        }
        
        .open-list-wrap::-webkit-scrollbar {
            width: 0;
        }
        
        .open-list {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            border-bottom: 1px solid #eee;
        }
        .open-list>div{
        	flex: 1 1 0;
        	width: 100%;
        }
        .list-content1 {
            display: flex;
            align-items: center;
        }
        
        .list-content1>span {
            margin-left: 5px;
            font-size: 15px;
        }
        
        .list-content2 {
        	text-align: center;
            font-size: 16px;
        }
        
        .list-content3 {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: 13px;
            color: #999;
        	text-align: center;
        }
        
        .list-content3>p:first-of-type {
            padding-bottom: 5px;
        }
        
        .list-content4 {
            font-size: 16px;
            color: #5BA641;
        	text-align: right;
        }
        
        .no-open-list {
            display: flex;
            justify-content: center;
            align-items: center;
            padding-top: 240px;
        }
    </style>
</head>

<body>
    <div id='app'>
        <div class='notice-hea'>
            <img @click='close' src="./img/right-black.svg" width="20px" height="20px">
            <div class="dis-cen">
            	<span @click='type=1' :style="{'color':type==1?'blue':''}">账单记录</span>
				<span @click='type=2' :style="{'color':type==2?'blue':''}">互转记录</span>
            </div>
            <img src="./img/right-black.svg" width="20px" height="20px" style="opacity: 0;">
        </div>
        <div class='title-hea'>
            <span>币种</span>
            <span>数量</span>
            <span>时间</span>
            <span>类型</span>
        </div>
        <div class='open-list-wrap' v-if="billList.length">
            <div class="open-list" v-for="(val,index) in billList" :key='index'>
                <div class='list-content1'>
                    <img :src="val.coins_logo?HTTP+val.coins_logo:'./img/timg.png'" width="22px" height="22px">
                    <span v-text='val.coins_ename'>BBT</span>
                </div>
                <div class='list-content2' v-text='_toFixed(val.amount,6)'>
                    6412.121
                </div>
                <div class='list-content3'>
                    <p v-text='val.addtime.split(" ")[0]'>2018/44/55</p>
                    <p v-text='val.addtime.split(" ")[1]'>12:00:01</p>
                </div>
                <div class='list-content4' v-text='val.type'>收款</div>
            </div>
            <div id='ready-new-data' style="height:80px;display:flex;justify-content:center;align-items:center;">
                <img v-if='!offNoData1' src="./img/down-loding.gif" width="80px" height="80px">
                <span v-else>无更多数据了</span>
            </div>
        </div>
        <div class='no-open-list' v-else>
            <img src="./img/no-data.png" width="100px" height="120px">
        </div>
    </div>
    <script src="js/comm.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/back.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/vue.min.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                //控制分页的圈
                offNoData1: true,
                //控制分页时机
                offUpFre: true,
                //交易记录
                billList: [],
                //页码
                page: 1,
                //1：账单纪录      2：互转纪录
                type:1
            },
            created: function() {
                this.getData();
            },
            mounted: function() {
            	var This=this;
            	this.$nextTick(function(){
            		This.handleAssetsRef();
            	});
            },
            watch:{
            	type:function(){
            		 this.page=1;
            		 this.billList=[];
            		 this.offUpFre=true;
            		 this.offNoData1=true;
            		 this.getData();
            	}
            },
            methods: {
                close: function() {
                    var web = plus.webview.currentWebview();
                    web.close('none');
                },
                //处理上拉加载
                handleAssetsRef: function() {
                    var This = this;
                    setTimeout(function() {
                        var ws = plus.webview.currentWebview();
                        var upEl = document.getElementById("ready-new-data");
                        var hei = $('.open-list-wrap').height();
                        $('.open-list-wrap').scroll(function() {
                            var scrollTop = $(this).scrollTop();
                            //判断是不是该上拉加载了
                            var upTop = upEl.offsetTop;
                            if (upTop >= scrollTop && upTop < scrollTop + hei) {
                                if (This.offUpFre && This.page > 1) {
                                    This.getData();
                                }
                            }
                        });
                    }, 500);
                },
                //得到交易记录
                getData: function() {
                    if (!this.offUpFre) {
                        return;
                    }
                    this.offUpFre = false;
                    var This = this;
                    _post(USER_TR, {
                    	type:this.type,
                        userid: JSON.parse(localStorage.getItem('user')).userid,
                        page: this.page++
                    }, function(data) {
                        if (data.status == 1) {
                            for (var i = 0; i < data.back.length; i++) {
                                This.billList.push(data.back[i]);
                            }
                            if (data.length < 10) {
                                This.offNoData1 = true;
                            } else {
                                This.offUpFre = true;
                            }
                        } else {
                            _toast(data.msg);
                        }
                    });
                }
            }
        });
    </script>
    <script type="text/javascript" charset="utf-8">
        function plusReady() {

        }

        // 判断扩展API是否准备，否则监听'plusready'事件
        if (window.plus) {
            plusReady();
        } else {
            document.addEventListener('plusready', plusReady, false);
        }
    </script>
</body>

</html>